<template>
  <el-radio-group v-if="tagType=='radio'" v-model="curValue" :disabled="disabled" @change="onChange" :size="size"
    :border="border" style="width: 100%;">
    <el-radio v-for="(item, key) in options" :label="getValue(item)" :key="getValue(item)">
      <slot name="option" :item="item">{{ getLabel(item) }}</slot>
    </el-radio>
  </el-radio-group>

  <el-radio-group v-else-if="tagType=='radioButton'" v-model="curValue" :disabled="disabled" @change="onChange"
    :size="size" :border="border" style="width: 100%;">
    <el-radio-button v-for="(item, key) in options" :label="getValue(item)" :key="getValue(item)">
      <slot name="option" :item="item">{{ getLabel(item) }}</slot>
    </el-radio-button>
  </el-radio-group>

   <el-checkbox-group v-else-if="tagType=='checkbox'" v-model="curValue" :disabled="disabled" @change="onChange" :size="size"
    :border="border" style="width: 100%;">
    <el-checkbox v-for="(item, key) in options" :label="getValue(item)" :key="getValue(item)">
      <slot name="option" :item="item">{{ getLabel(item) }}</slot>
    </el-checkbox>
  </el-checkbox-group>

  <el-checkbox-group v-else-if="tagType=='checkboxButton'" v-model="curValue" :disabled="disabled" @change="onChange"
    :size="size" :border="border" style="width: 100%;">
    <el-checkbox-button v-for="(item, key) in options" :label="getValue(item)" :key="getValue(item)">
      <slot name="option" :item="item">{{ getLabel(item) }}</slot>
    </el-checkbox-button>
  </el-checkbox-group>

  <el-select v-else-if="tagType=='select'" :value="curValue" :placeholder="placeholder" :clearable="clearable"
    :disabled="disabled" :filterable="filterable" :filter-method="filterMethod" :multiple="multiple" :collapse-tags="collapseTags" @change="onChange"
    @visible-change="onVisibleChange" @remove-tag="onRemoveTag" @clear="onClear" @blur="onBlur" @focus="onFocus"
    :size="size" style="width: 100%;">
    <el-option :value="undefined" v-if="useEmptyVal&&!multiple">请选择</el-option>
    <el-option v-for="(item, key) in options" :key="key" :value="getValue(item)" :label="getLabel(item)">
      <slot name="option" :item="item"><span>{{ getLabel(item) }}</span></slot>
    </el-option>
  </el-select>

</template>

<script>
  import {
    httpGet
  } from '@/api';

  export default {
    name: "LamSelect",
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      path: String,
      list: Array,
      valueName: {
        type: String,
        default: 'value'
      },
      labelName: {
        type: String,
        default: 'text'
      },
      useEmptyVal: {
        type: Boolean,
        default: true
      },
      placeholder: String,
      disabled: {
        type: Boolean,
        default: false
      },
      collapseTags: {
        type: Boolean,
        default: true
      },
      filterable: {
        type: Boolean,
        default: false
      },
      filterMethod: {
        type: Function(),
        default: function(){}
      },
      value: [String, Number, Array],
      type: String,
      clearable: {
        type: Boolean,
        default: true
      },
      useSpliter: {
        type: Boolean,
        default: true
      },
      spliter: {
        type: String,
        required: false,
        default: ','
      },
      border: {
        type: Boolean,
        default: false
      },
      size: {
        type: String
      }
    },
    data() {
      return {
        options: [],
        tagType: "",
        curValue: null
      }
    },
    watch: {
      list: {
        immediate: true,
        handler: function(newVal) {
          if (newVal) {
            this.options = newVal;
          }
        }
      },
      path: {
        immediate: true,
        handler: function(newVal) {
          if (newVal) {
            this.initData()
          }
        }
      },
      value: {
        immediate: true,
        handler: function(newVal) {
          if (this.multiple) {
            if(!newVal){
              this.curValue = [];
            }else{
              this.curValue = Array.isArray(newVal) ? newVal:newVal.toString().split(this.spliter);
            }
          } else {
            this.curValue = (newVal===0||!!newVal) ? newVal.toString() : undefined;
          }
        }
      }
    },
    computed: {
      multiple(){
        return this.type == "multipleSelect" || this.type == 'checkbox' || this.type == 'checkboxButton';
      }
    },
    created() {
      if (!this.type || this.type === "list") {
        this.tagType = "select"
      } else if (this.type === "multipleSelect") {
          this.tagType = "select"
      } else {
        this.tagType = this.type
      }
    },
    methods: {
      initData() {
        httpGet(this.path).then(response => {
          this.options = response.data;
        });
      },
      getValue(item){
        return (typeof item) == 'string' ? item : item[this.valueName];
      },
      getLabel(item){
        return (typeof item) == 'string' ? item : item[this.labelName];
      },

      onChange(selectedValue) {
        this.curValue = selectedValue;//此处必须有，否则带有插槽的自定义模板选项被选择后界面不更新当前选择项
        if (this.multiple && this.useSpliter) {
          this.$emit('change', selectedValue ? selectedValue.join(this.spliter) : null);
        } else {
          this.$emit('change', selectedValue);
        }
      },
      onVisibleChange(val){
        this.$emit('visibleChange', val);
      },
      onRemoveTag(val){
        this.$emit('removeTag', val);
      },
      onClear(val){
        this.$emit('clear', val);
      },
      onBlur(val){
        this.$emit('blur', val);
      },
      onFocus(val){
        this.$emit('focus', val);
      },
      setOptions(options) {
        if (options) {
          this.options = options
        }
      },
      getOptions() {
        return this.options
      }
    }
  }
</script>

<style scoped>
</style>
